<template>
	<view class="container" :style="{width:windowWidth+'px',height:windowHeight+'px'}">
		<cu-custom>
			<block slot="content">录音回放</block>
		</cu-custom>
		<view class="content ">
			<view class="content_con">
				<view class="image_1">
					<image style="width: 218rpx;height: 218rpx" src="/static/img/recording-cricle.png"></image>
				</view>
				<view class="num">
					<image style="height: 100rpx;" src="/static/img/sounds.png"></image>
				</view>
				<view class="text flex justify-center">
					{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
				</view>
			</view>
			<view class="list  flex justify-end align-center">
				<view @click="togglePlayPause" class="image_2">
					<view class="img">
						<image v-if="!isPlaying" style="width: 174rpx;height: 174rpx;" src="/static/img/play.png">
						</image>
						<image v-else style="width: 174rpx;height: 174rpx" src="/static/img/pause.png"></image>
					</view>
					<view class="text_2">{{!isPlaying? '开始播放': "暂停播放"}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 20,
				windowHeight: 650,
				windowWidth: 375,
				isPlaying: false,
				currentTime: 0,
				audioSrc: '',
				audioContext: null,
				duration: 0,
				progress: 0,
			}
		},
		onLoad(option) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.audioSrc = option.audioSrc;
			this.duration = option.duration ? parseFloat(option.duration) : 0;
			console.log(this.duration)
			setTimeout(() => {
				this.initAudio()
			}, 150)
		},
		mounted() {


		},
		computed: {
			formattedDuration() {
				const minutes = Math.floor(this.duration / 60);
				const seconds = Math.floor(this.duration % 60);
				return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
			},
		},
		onUnload() {
			this.beforeDestroy()
		},
		methods: {
			initAudio() {
				this.audioContext = uni.createInnerAudioContext();

				this.audioContext.src = this.audioSrc;
				this.audioContext.onPlay(() => {
					this.isPlaying = true;
				});
				this.audioContext.onPause(() => {
					this.isPlaying = false;
				});
				this.audioContext.onTimeUpdate(() => {
					this.currentTime = this.audioContext.currentTime;
					console.log(this.currentTime)
					// if (!this.duration) {
					// 	this.duration = this.audioContext.duration;
					// }
				});
				this.audioContext.onCanplay(() => {
					// 音频可以播放时获取总时长
					// this.duration = this.audioContext.duration;
					// if (!this.duration) {
					// 	this.duration = this.audioContext.duration?this.audioContext.duration:0;
					// }
					console.log(this.audioContext)
					console.log(this.duration)
				});
				this.audioContext.onEnded(() => {
					this.isPlaying = false;
					this.currentTime = 0; // 播放结束后重置时间
					this.audioContext.seek(0); // 重置音频进度
				});
			},
			togglePlayPause() {
				if (this.isPlaying) {
					this.audioContext.pause();
				} else {
					this.audioContext.play();
				}
			},

			beforeDestroy() {
				if (this.audioContext) {
					this.audioContext.destroy(); // 避免内存泄漏
				}
			},
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
			},
		},
	}
</script>

<style lang="less" scoped>
	.container {
		box-sizing: border-box;
		background-image: url('@/static/img/log-bg.png');
		background-size: 100% 100%;
		overflow: hidden;
		position: relative;

		.content {
			.content_con {
				position: absolute;
				top: 40%;
				transform: translate(-50%, -50%);
				left: 50%;
				width: 100%;
			}

			.image_1 {
				text-align: center;
			}

			.list {
				width: 100%;
				position: absolute;
				bottom: 20%;
				color: #333;
				font-size: 40rpx;
				font-weight: 400;

				.image_2 {
					position: absolute;
					left: 50%;
					width: 300rpx;
					height: 300rpx;
					text-align: center;
					transform: translateX(-50%);

					.img {
						width: 300rpx;
						height: 300rpx;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.text_2 {
						position: absolute;
						bottom: 0rpx;
						left: 50%;
						width: 100%;
						text-align: center;
						transform: translateX(-50%);
					}
				}
			}

			.num {
				color: #333;
				margin-top: 2vh;
				margin-bottom: 3vh;
				text-align: center;
				font-size: 40rpx;

			}

			.text {
				text-align: center;
				color: #333;
				font-size: 36rpx;

			}
		}
	}
</style>